<template>
  <div class="label_box" :class="{hiddens:isClass}">
    <h1>资源标记</h1>
    <!-- 搜索框 -->
    <div style="margin-top: 15px;">
      <el-input placeholder="手机号可以输入多个用空格或者逗号隔开" v-model="search" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option
            v-for="item in searchItem"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="searchBtn" :disabled="flage"></el-button>
      </el-input>
    </div>
    <!-- 搜索框 -->
    <!-- 资源列表 -->
    <el-table :data="currentList" border style="width: 100%">
      <el-table-column prop="name" label="患者姓名"></el-table-column>
      <el-table-column prop="zhenduan" label="病种" sortable></el-table-column>
      <el-table-column prop="status" label="状态" sortable></el-table-column>
      <el-table-column prop="msgsource" label="患者来源" width="240" sortable>
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-cascader
              expand-trigger="hover"
              :options="webList"
              @change="upDate(scope.row)"
              v-model="scope.row.msgsource"
            ></el-cascader>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="患者电话" sortable></el-table-column>
      <el-table-column prop="qq" label="QQ" sortable></el-table-column>
      <el-table-column prop="weixin" label="微信" sortable></el-table-column>
      <el-table-column prop="createTime" label="创建日期" sortable></el-table-column>
      <el-table-column prop="doctor" label="主治医师" sortable></el-table-column>
      <el-table-column prop="createName" label="创建人" sortable width="90"></el-table-column>
      <el-table-column label="操作" width="50">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 资源列表 -->
    <!-- 翻页按钮 -->
    <page :allList="allList" @parentCurrentList="getcurrentList"></page>
    <!-- 翻页按钮 -->
    <!-- 修改内容 -->
    <div class="create_box" v-if="isShow">
      <updata class="updata" @parentisShow="getparentisShow" @updataisClass="updataisClass"></updata>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import axios from "axios";
import page from "../page";
import updata from "./updata";
export default {
  created () {
    this.getState();
    this.getDoctor();
  },
  data () {
    return {
      isClass: false,
      search: "",
      select: "phone",
      backupsList: "",
      flage: false,
      allList: [],
      msgsource: [],
      currentList: [],
      selected: "",
      isShow: false,
      searchItem: [],
      showLoading: true
    };
  },
  components: {
    page,
    updata
  },
  methods: {
    getDoctor () {
      axios.get("/static/data/doctor.json").then(res => {
        this.searchItem = res.data.searchItem;
        this.webList = res.data.webList;
      });
    },
    success (msg) {
      this.$message({
        message: msg,
        type: "success"
      });
    },
    fault (msg) {
      this.$message.error(msg);
    },
    selectShow () {
      // console.log("selectShow");
    },
    getcurrentList (data) {
      this.currentList = data;
    },
    getparentisShow (data) {
      this.isShow = data;
    },
    updataisClass (data) {
      this.isClass = data;
    },
    // 搜索输入框
    searchBtn () {
      var that = this;
      this.flage = true;
      if (this.search.trim() != "" && this.select != "") {
        // 创建搜索对象
        var searchData = {};
        searchData[this.select] = this.search;
        // 发送搜索数据到后台
        axios.get("api/search", { params: { searchData } }).then(res => {
          if (res.data.status == 0) {
            that.allList = res.data.data.reverse();
            that.currentList = [];
            // 返回结果小于10就显示全部
            if (that.allList.length < 10) {
              that.currentList = that.allList;
            } else {
              // 不小于10就取出前十个放进数组
              for (let i = 0; i < 10; i++) {
                that.currentList.push(that.allList[i]);
              }
            }
            // 患者来源变成可读取格式
            that.currentList.forEach(function (item) {
              for (var key in item) {
                if (key == "msgsource") {
                  item[key] = item[key].split("/");
                }
              }
            });
            // 发送成功禁止按钮三秒
            that.success(res.data.msg);
            setTimeout(function () {
              that.flage = false;
            }, 3000);
          }
        });
      } else {
        setTimeout(function () {
          that.flage = false;
        }, 3000);
        this.fault("输入有误");
      }
    },
    // 加载历史数据
    getState () {
      axios.post('api/state')
        .then(res => {
          if (res.data.status == 0) {
            setTimeout(() => {
              this.showLoading = false
            }, 1000)
            // 反转数组
            if (res.data.data) {
              this.backupsList = this.allList = res.data.data.reverse();
            }
            this.allList.forEach(function (item) {
              for (var key in item) {
                if (key == "msgsource") {
                  item[key] = item[key].split("/");
                }
              }
            });
            for (let i = 0; i < 10; i++) {
              this.currentList.push(this.allList[i]);
            }
          }
        }).catch(error => {
          console.log(error)
        })
    },
    // 编辑按钮
    edit (data) {
      this.isShow = true;
      this.isClass = true;
      // 使用vuex共享数据
      this.$store.commit("upData", data);
    },
    // 修改选择框
    upDate (data) {
      axios.post('api/update', {
        name: data.name,
        createTime: data.createTime,
        id: data._id,
        msgsource: data.msgsource.join("/")
      }).then(res => {
        if (res.data.status == 0) {
          this.success(res.data.msg);
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
};
</script>
<style lang="stylus" scoped>
.el-select {
  width: 80px !important;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.input-with-select {
  width: 500px;
  margin-bottom: 15px;
}

.selectedList {
  width: 100%;

  select {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-right: 1px solid #cacaca;
    border-left: 1px solid #cacaca;
  }
}

.label_box {
  .create_box {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 0;
    left: 0;

    .updata {
      padding: 20px 30px;
      background: #fff;
      width: 700px;
      height: 700px;
      display: inline-block;
      position: absolute;
      top: 40px;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
  }
}

.label_box {
  .create_box {
    z-index: 1;
  }
}

.hiddens {
  overflow: hidden;
}
</style>
